<style lang="scss" scoped>
  .leftpad{
    width: 23.75vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .front{
      .title{
        font-size: 0.833vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #00D1E3;
        opacity: 1;
        margin-bottom: 0.625vw;
      }
      .lis {
        width: 23.75vw;
        height: 7.19vw;
        background: rgba(4, 146, 164, 0.1);
        opacity: 1;
        box-sizing: border-box;
        padding:0.156vw 0.312vw 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .li{
          width:4.84vw;
          height:4.84vw;
          border: 0.5px solid rgba(192, 208, 231, 0.1);
          opacity: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          .name{
            font-size:0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
            margin-bottom:0.781vw;
          }
          .num{
            font-size:0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E6F1F5;
            span{
              font-size:0.729vw;
              font-family: DIN;
              font-weight: 500;
              color: #FF6400;
              opacity: 1;
              line-height: 0.833vw;
            }
            .type{
              opacity: 0.5;
              margin-left: 0.52vw;
            }
          }
        }
      }
    }
    .current,.dynamic{
      margin-top: 0.937vw;
      .title{
        font-size: 0.833vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #00D1E3;
        opacity: 1;
        margin-bottom: 0.625vw;
        line-height: 1.146vw;
      }
      .box{
        width: 23.75vw;
        padding-bottom:0.312vw;
        .th{
          width: 23.75vw;
          height: 1.98vw;
          background: rgba(4, 146, 164, 0.1);
          opacity: 1;
          span{
            width: 4.53vw;
            font-size:0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 1.98vw;
            color: #00D1E3;
            text-align: center;
            display: inline-block;
          }
          span:first-child{
            width: 4.43vw;
          }
          span:nth-child(2){
            width: 5.73vw;
          }
        }
        .body{
          height: 11.98vw;
          overflow-y: hidden;
          .lis{
            position: relative;

            .li{
              display: flex;
              align-items: center;
              height: 2.396vw;
              span{
                width: 4.53vw;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 1.98vw;
                text-align: center;
                display: inline-block;
                font-size: 0.625vw;
                color: #E3E3E3;
                line-height: 2.396vw;
                opacity: 1;
              }
              span:first-child{
                width: 4.43vw;
              }
              span:nth-child(2){
                width: 5.73vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
          .stopTrans{
            transition: bottom 2s ease;
          }
        }
        .body::-webkit-scrollbar {display:none}
      }
    }
    .dynamic{
      .box{
        .th{
          span{
            width: 5.73vw;
          }
          span:first-child{
            width: 4.48vw;
          }
          span:nth-child(2){
            width: 7.81vw;
          }
        }
        .body{
          .lis{
            .li{
              span{
                width: 5.73vw;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              span:first-child{
                width: 4.48vw;
              }
              span:nth-child(2){
                width: 7.81vw;
              }
              .action{
                width: 2.19vw;
                height: 0.937vw;
                border: 0.052vw solid #40A0FC;
                opacity: 1;
                font-size: 0.469vw;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 0.937vw;
                color: #40A0FC;
                opacity: 1;
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .circle{
      margin-top: 1.354vw;
      .title{
        font-size: 0.833vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #00D1E3;
        opacity: 1;
        margin-bottom: 0.625vw;
        line-height: 1.146vw;
      }
      .lis{
        width: 23.75vw;
        height: 9.79vw;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        .li{
          position: relative;
          .name{
            margin-top: 1.12vw;
            font-size:0.677vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
            text-align: center;
          }
          .sc{
            position: absolute;
            left:50%;
            top: 40%;
            z-index: 100;
            transform: translateX(-50%);
            font-size:0.677vw;
            font-family: DIN;
            font-weight: 400;
            color: #E3E3E3;
            opacity: 1;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="leftpad">
    <div class="front">
      <div class="title">前端垃圾分类</div>
      <div class="lis bot_s">
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">设备总数</div>
          <div class="num"><span>{{frontData.deviceTotal || 0}}</span> <span class="type">个</span></div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">总投递次数</div>
          <div class="num"><span>{{frontData.deliverTotal || 0}}</span> <span class="type">次</span></div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">当日回收量</div>
          <div class="num"><span>{{frontData.recoveryToday || 0}}</span> <span class="type">吨</span></div>
        </div>
        <div class="li four_b">
          <div class="four_t"></div>
          <div class="name">累计回收量</div>
          <div class="num"><span>{{frontData.recoveryTotal || 0}}</span> <span class="type">吨</span></div>
        </div>
      </div>
    </div>
    <padleftcurrent></padleftcurrent>
    <padleftdynamic></padleftdynamic>
    <div class="circle">
      <div class="title">分类质量统计</div>
      <div class="lis bot_s">
        <div class="li">
          <screemcir  :score="cirData.know" :color="'rgba(159, 60, 0, 1)'" :name="'screemcir1'">
            <div class="sc">{{cirData.know}}%</div>
          </screemcir>
          <div class="name">知晓率</div>
        </div>
        <div class="li">
          <screemcir  :score="cirData.participation" :color="'rgba(211, 179, 31, 1)'" :name="'screemcir2'">
            <div class="sc">{{cirData.participation}}%</div>
          </screemcir>
          <div class="name">参与率</div>
        </div>
        <div class="li">
          <screemcir  :score="cirData.correct" :color="'rgba(24, 145, 77, 1)'" :name="'screemcir3'">
            <div class="sc">{{cirData.correct}}%</div>
          </screemcir>
          <div class="name">正确率</div>
        </div>
        <div class="li">
          <screemcirview :garbageRatio="cirData.garbageRatioVO">
          </screemcirview>
          <div class="name">类型占比</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import {getGarbageSortDeviceStatistics, listRealTimeDeliverReport,
  listRealTimeFaultReport,getClassifiedQualityStatistics
} from "@/api/screem";
import padleftcurrent from './padleftcurrent.vue'
import padleftdynamic from './padleftdynamic.vue'
import screemcir from './screemcir.vue'
import screemcirview from './screemcirview.vue'
export default {
  name: "screem",
  data() {
    return {
      initTimer: null,
      frontData: {},
      cirList: [
        {name: 'screemcir1'},
        {name: 'screemcir2'},
        {name: 'screemcir3'},
        {name: 'screemcir4'},
      ],
      cirData: {
        garbageRatioVO: {}
      }
    };
  },
  created() {
   this.pullInit()
  },
  mounted() {
  },
  props: [],
  components: {padleftcurrent,padleftdynamic,screemcir,screemcirview},
  methods: {
    pullInit() {
      this.init()
      this.initTimer = setInterval(() => {
        this.init()
      }, 60000)
    },
    init() {
      getGarbageSortDeviceStatistics()
        .then(res => {
          this.frontData = res.data || {}
        })


      getClassifiedQualityStatistics()
        .then(res => {
          this.cirData.know = res.data.know * 100 || 0
          this.cirData.participation = res.data.participation * 100 || 0
          this.cirData.correct = res.data.correct * 100 || 0
          this.cirData.garbageRatioVO = res.data.garbageRatioVO
        })

    }
  },
  beforeDestroy() {
    if (this.initTimer ) {
      clearInterval(this.initTimer )
    }
  }
};
</script>


